<!-- 复选框组件 -->
<template>
  <van-field
    v-if="!readonly"
    name="checkboxGroup"
    :required="required"
    :label="labelText"
    :rules="[{ required: required, message: message }]"
  >
    <template #input>
      <van-checkbox-group
        @change="changeGroup"
        v-model="groupChecked"
        :direction="direction"
        :max="max"
        :disabled="disabled"
      >
        <van-checkbox
          v-for="(item, i) in state.checkList"
          :key="i"
          :name="item.value"
          shape="square"
        >
          {{ item.text }}
        </van-checkbox>
      </van-checkbox-group>
    </template>
  </van-field>
  <!-- 详情只读模式 -->
  <van-field
    v-else
    readonly
    :label="labelText"
    :placeholder="labelText"
    v-model="groupCheckedText"
  />
</template>

<script setup>
import { ref, reactive, watch, onBeforeMount } from 'vue'
import { dictStore } from '@/pinia/modules/dict.js'

const emit = defineEmits(['update:value'])

const props = defineProps({
  // label名称
  labelText: {
    type: String,
    default: '复选框'
  },
  // 选择器下拉选项
  checkList: {
    type: Array,
    default: () => [
      { text: '杭州', value: '1' },
      { text: '宁波', value: '2' },
      { text: '温州', value: '3' },
      { text: '绍兴', value: '4' },
      { text: '湖州', value: '5' }
    ]
  },
  // 是否必填
  required: {
    type: Boolean,
    default: false
  },
  // 提示语
  message: {
    type: String,
    default: '请选择'
  },
  // 双向绑定的值
  value: {
    type: String,
    default: ''
  },
  // 最多可选择项个数
  max: {
    type: Number,
    default: 0
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  //   排列方式 vertical竖向
  direction: {
    type: String,
    default: 'horizontal'
  },
  // readonly true 只读模式 false 表单模式
  readonly: {
    type: Boolean,
    default: false
  },
  // 字典code
  code: {
    type: String,
    default: 'SF'
  }
})

const state = reactive({
  checkList: props.checkList
})

watch(
  () => props.value,
  val => {
    if (val.length > 0) {
      groupChecked.value = val.split(',')
      console.log(groupChecked.value)
      if (props.readonly) {
        let arr = []
        val.split(',').map(v => {
          let res = state.checkList.filter(item => {
            return item.value == v
          })
          arr.push(res[0].text)
        })
        groupCheckedText.value = arr.join(',')
      }
    }
  }
)

const initCode = () => {
  let target = dictStore().dict.find(item => item.code == props.code)
  let arr = []
  if (target && target.children.length > 0) {
    target.children.forEach(item => {
      arr.push({ value: item.code, text: item.name })
    })
  }
  state.checkList = arr
  // keyValue.value = new Date().getTime()
  console.log(arr)
}

const groupChecked = ref([])
const groupCheckedText = ref('')

const changeGroup = val => {
  emit('update:value', val.join(','))
}

onBeforeMount(() => {
  if (props.code) {
    initCode()
  }
  if (props.value) {
    groupChecked.value = props.value.split(',')
    if (props.readonly) {
      let arr = []
      props.value.split(',').map(v => {
        let res = state.checkList.filter(item => {
          return item.value == v
        })
        arr.push(res[0].text)
      })
      groupCheckedText.value = arr.join(',')
    }
  }
})
</script>
<style lang="scss" scoped>
.van-checkbox {
  margin: 5px 12px 5px 0;
}
</style>
